默司 大大 主講 microsoft visual studio code & typescript 入門

https://www.youtube.com/watch?v=iP6vM2hZ8TM

心得整理

1.typescript 是一個強行別的語言
2.他配vscode編輯器,可以很容易有智能提示
3.語法統一,可以不需要因為es6,es7版本一直更新而更換程式碼,可以透過指令tsc 去build出程式碼

使用方法

1.環境設定
在package.json 中設定 devDependencies 中需要 typescript與 @types/node webpack.config.js
2.@types/node 可以支援程式碼智能提示
3.webpack.config.js 設定

...
entry 設定 main: path.join(__dirname,"src/main.ts")
resolve extendsions 設定['','ts','tsx','js']
loaders 部分多一個 ts-loader使用 loader:'ts?configFileName=jsconfig.json
output 使用 filename:[name].js,libaryTarget:'commonjs',path:path.join(__dirname,"dist")
...

4.原本吃tsconfig,應為要使用智能提示所以默司這邊使用jsconfig.js,上方的loader ts-loader 的configFileName也是變成自定義改成 configFileName=jsconfig.json json格式為
這邊是為了告訴ts編譯出來的東西是什麼

{
"complierOptions":{
   "target": "es5",
   "module":"commonjs"
}
}

5.接下來默司講解了基礎typescript 語法講解

Class Person{
       name:string;       <--ts link 一定要設定 或是也可以設定在 construtor中使用public
       age:number;
       pets:Pet[];
       constructor(name:string,age:number ){ <--設定強型別不設定為any容易錯誤
          this.name=name;
          this.age=age;
       }
} 

class Pet{
 name:string;
 owner:Person;
 constructor(){}
}

export class Main{
       constructor(){}
       hello(){
        let person1=new Person("polo",41); <--上放設定後這邊如果有不正確就會噴錯
        let per1=new Pet("luck");
        
       }
}

new Main().hello(); 

6.透過webpack從src編譯出dist 在使用node ./dist 就可以執行這個 ts

7.可以使用modules把類別抽離分開建立一個 person.js 與 pet.js

12/28 晚上 19:30 線上讀書會 有邀請到 潘拉拉 大大 來主講一堂 TypeScript 入門 歡迎新手一起來交流討論 可以加入
線上 angularjs 讀書會 或 線上 reactjs 讀書會 參加 該活動

現在 線上讀書會 粉絲團有 chatbot 嚕 如果不知道怎樣加入發訊給粉絲團就有 chatbot 為你服務

https://www.facebook.com/readbook999/ 來了解更多關於線上讀書會

Ps不用再問POLO嚕 線上系列所有活動都是免費的